<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 路由基本信管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>路由编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form
            ref="formRef"
            :rules="rules"
            :model="form.data"
            label-width="80px"
        >
          <el-form-item label="路由" prop="path">
            <el-input v-model="form.data.path"></el-input>
          </el-form-item>
          <el-form-item label="模块名">
            <el-input v-model="form.data.name"></el-input>
          </el-form-item>
          <el-form-item label="一级模块" prop="name">
            <el-select v-model="form.data.pid" placeholder="请选择模块名">
              <el-option
                  v-for="item in pidlist"
                  :key="item.sid"
                  :label="item.name"
                  :value="item.sid"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import request from "../../utils/request";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

export default {
  name: "AddMajor",
  setup() {
    const root = "/permission/";
    const router = useRouter();
    const route = useRoute();
    const store = useStore();

    const pidlist = ref([]);
    request.get("/permission/getAll").then((res) => {
      pidlist.value = res.data;
    });


    const rules = {
      name: [{required: true, message: "输入木块名", trigger: "blur"}],
    };

    const formRef = ref(null);
    var form = reactive({
      data: {
        sid: "",
        path: "",
        name: "",
        pid: "",
      },
    });
    //编辑单个数据回显
    if (route.query.id) {
      request.get(root + route.query.id).then((res) => {
        form.data = res.data;
      });
    }
    // 提交
    const onSubmit = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          var method = form.data.sid === "" ? "POST" : "PUT";
          request({
            url: root,
            method: method,
            data: form.data,
          }).then((res) => {
            if (res.code == 18) {
              ElMessage.error(res.msg);
            } else {
              ElMessage.success("提交成功！");
              // 关闭当前页面的标签页;
              store.commit("closeCurrentTag", {
                $router: router,
                $route: route,
              });
            }
            router.push("/admin/rolePermission");
          });
        } else {
          return false;
        }
      });
    };
    // 重置
    const onReset = () => {
      formRef.value.resetFields();
    };

    return {
      pidlist,
      rules,
      formRef,
      form,
      onSubmit,
      onReset,
    };
  },
};
</script>